{% extends "base.html" %}
{% block title %}首页 - IT资产管理平台{% endblock %}

{% block content %}
<div class="home-container">

  <!-- 仪表板区域 -->
  <!-- 仪表板区域 -->
  <section class="dashboard">
    <!-- 主机数量模块 -->
    <div class="module">
      <h2>主机数量</h2>
      <p id="hostCount">{{ host_total|default(0) }}</p>
    </div>
    <!-- 中间件数量模块 -->
    <div class="module">
      <h2>中间件数量</h2>
      <p id="middlewareCount">{{ middleware_total|default(0) }}</p>
    </div>

    <!-- 天气模块 -->
    <div class="weather-card">
      <h2>天气情况</h2>
      <div class="weather-info">
        <div id="weatherDetails">
          <div id="weatherIcon" class="weather-icon" style="font-size: 24px;">☀️</div>
          <div id="weatherDesc" class="weather-desc">加载中...</div>
          <div id="weatherTemp" class="weather-temp">温度: —°C</div>
        </div>
      </div>
    </div>
    <!-- 当前时间模块 -->
    <div class="module">
      <h2>当前时间</h2>
      <p id="currentTime"></p>
    </div>


  </section>




  <!-- 最近新增记录区域（此处示例可根据实际需求添加） -->
  <section class="recent-records">
    <!-- 最近新增主机列表、最近新增中间件列表模块代码略 -->
    <div class="recent-module">
      <h3>最近新增主机列表</h3>
      {% if recent_hosts and host_columns %}
      <table class="recent-table">
        <thead>
          <tr>
            {% for col in host_columns %}
              <th>{{ col.name }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for host in recent_hosts %}
            <tr>
              {% for col in host_columns %}
                <td>{{ host[col.name]|default('') }}</td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p>暂无数据</p>
      {% endif %}
    </div>
    <!-- 最近新增中间件列表 -->
    <div class="recent-module">
      <h3>最近新增中间件列表</h3>
      {% if recent_middlewares and middleware_columns %}
      <table class="recent-table">
        <thead>
          <tr>
            {% for col in middleware_columns %}
              <th>{{ col.name }}</th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for m in recent_middlewares %}
            <tr>
              {% for col in middleware_columns %}
                <td>{{ m[col.name]|default('') }}</td>
              {% endfor %}
            </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p>暂无数据</p>
      {% endif %}
    </div>
  </section>
</div>
{% endblock %}

{% block styles %}
{{ super() }}
<style>
  .home-container {
    padding: 30px;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
  }
  .home-header {
    text-align: center;
    margin-bottom: 30px;
  }
  .home-header h1 {
    font-size: 2.8em;
    margin: 0;
    color: #333;
  }
  .dashboard {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
  }
  .dashboard .module {
    background-color: #fff;
    flex: 1 1 22%;
    min-width: 200px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.2s ease;
  }
  .dashboard .module:hover {
    transform: translateY(-5px);
  }
  .dashboard .module h2 {
    font-size: 1.5em;
    color: #555;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
  }
  .dashboard .module p {
    font-size: 2em;
    font-weight: bold;
    margin: 0;
    color: #007BFF;
  }
  /* 天气模块下拉菜单样式 */
  #weatherLocation {
    padding: 5px 10px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  /* 最近新增记录区域 */
  .recent-records {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }
  .recent-records .recent-module {
    background-color: #fff;
    flex: 1 1 45%;
    min-width: 300px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }
  .recent-records .recent-module h3 {
    font-size: 1.5em;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    color: #333;
  }
  .recent-table {
    width: 100%;
    border-collapse: collapse;
  }
  .recent-table th, .recent-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
  .recent-table th {
    background-color: #f0f0f0;
    font-weight: bold;
    color: #555;
  }
  .recent-records .recent-module p {
    text-align: center;
    color: #777;
  }
  /* 天气模块样式 */
  .weather-module {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .weather-card {
    background-color: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
  }
  .weather-card h2 {
    font-size: 1.8em;
    margin-bottom: 15px;
  }
  .weather-info {
    margin-top: 20px;
  }
  .weather-icon {
    margin: 20px 0;
    font-size: 48px;
  }
  .weather-desc {
    font-size: 1.5em;
    margin: 10px 0;
  }
  .weather-temp {
    font-size: 1.4em;
    margin-top: 10px;
  }
</style>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
document.addEventListener("DOMContentLoaded", function() {
  // 更新当前时间
  function updateTime() {
    var now = new Date();
    var year = now.getFullYear();
    var month = (now.getMonth() + 1).toString().padStart(2, '0');
    var day = now.getDate().toString().padStart(2, '0');
    var hours = now.getHours().toString().padStart(2, '0');
    var minutes = now.getMinutes().toString().padStart(2, '0');
    var seconds = now.getSeconds().toString().padStart(2, '0');
    document.getElementById("currentTime").textContent = year + "-" + month + "-" + day +
            " " + hours + ":" + minutes + ":" + seconds ;
  }
  updateTime();
  setInterval(updateTime, 1000);

  // 获取天气信息函数，使用 Weatherbit API 获取 JSON 数据
  function fetchWeather(lat, lon) {
    // 请求后端代理 API，传递经纬度参数
    var url = `/get_weather?lat=${lat}&lon=${lon}`;

    fetch(url)
      .then(response => response.json())
      .then(data => {
        if (data && data.temperature) {
          var temp = data.temperature;
          var desc = data.description;
          var icon = data.icon;

          document.getElementById("weatherDesc").textContent = desc;
          document.getElementById("weatherTemp").textContent = "温度: " + temp + "°C";

          // 显示天气图标
          document.getElementById("weatherIcon").innerHTML = `<img src="${icon}" alt="${desc}" style="width: 50px; height: 50px;">`;
        } else {
          document.getElementById("weatherInfo").textContent = "无法获取天气信息";
        }
      })
      .catch(error => {
        console.error("天气获取错误：", error);
        document.getElementById("weatherInfo").textContent = "天气获取失败";
      });
  }

  // 获取用户位置并获取天气
  function getUserLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
        console.log("位置: 纬度 " + lat + ", 经度 " + lon);
        fetchWeather(lat, lon);  // 根据经纬度获取天气信息
      });
    } else {
      console.error("浏览器不支持定位");
      fetchWeather(39.9042, 116.4074); // 默认城市为北京的经纬度
    }
  }

  // 获取用户位置并显示天气
  getUserLocation();
});
</script>
{% endblock %}
